package com.example.chat.view

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.*
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.chat.viewmodel.ChatListViewModel
import com.example.featuresdk.core.AbstractFeatureSDK
import com.example.featuresdk.model.Topic
import com.example.featuresdk.view.AppBottomNavigationView
import com.example.featuresdk.view.AppHeaderFeatureView
import com.example.featuresdk.viewmodel.NavigationViewModel


@ExperimentalUnitApi
@Composable
fun ChatListScreen(
    navigationViewModel: NavigationViewModel,
    featureSDK: AbstractFeatureSDK,
    chatViewModel: ChatListViewModel = viewModel()) {

    Column(modifier = Modifier
        .background(Color.Transparent).fillMaxSize()) {

        AppHeaderFeatureView(navigationViewModel)

        //Guide:https://developer.android.google.cn/jetpack/compose/lists
        LazyColumn(modifier = Modifier
            .background(Color.Transparent)
            .fillMaxWidth()
            .height(navigationViewModel.appBodyHeightDp.dp),
            contentPadding = PaddingValues(horizontal = 0.dp,vertical = 8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)){

            items(chatViewModel.chatHistories.value){
                    topic -> ChatEntryView(topic,navigationViewModel, featureSDK.featureKey())
            }

            item(){
                Text(text = "End",color = Color.Gray, modifier = Modifier
                    .height(20.dp)
                    .fillMaxWidth(), textAlign = TextAlign.Center)
            }
        }

        AppBottomNavigationView(navigationViewModel)
    }
}

@ExperimentalUnitApi
@Composable
fun ChatEntryView(topic: Topic, screenConfiguration: NavigationViewModel, featureKey:String) {

    val horizontalPadding = 4
    val spacerWidth = 2
    val tailingContentWidth = 80
    val rowHeight = 50
    val rowTopCellHeight = 30
    val rowBottomCellHeight = rowHeight - rowTopCellHeight
    val textWidth = screenConfiguration.screenWithDp - horizontalPadding - horizontalPadding - rowHeight - spacerWidth - tailingContentWidth

    Row(horizontalArrangement = Arrangement.Start, verticalAlignment = Alignment.Top,
        modifier = Modifier.background(Color.White).clickable {
            //Navigate to the chat detail screen for the selected topic
            screenConfiguration.navHostController.navigate("$featureKey/chatroom/${topic.key}?title=${topic.title}")
        }){

        Spacer(modifier = Modifier.width(horizontalPadding.dp))

        Image(painter = painterResource(topic.icon),
            contentDescription = topic.summary,
            modifier = Modifier.width(rowHeight.dp).height(rowHeight.dp))

        Spacer(modifier = Modifier.width(spacerWidth.dp))

        Column{
            Row{
                Column {
                    Text(text = topic.title,
                        modifier = Modifier
                            .width(textWidth.dp)
                            .height(rowTopCellHeight.dp)
                            .background(Color.Transparent),
                        textAlign = TextAlign.Start,
                        fontSize = TextUnit(4f, TextUnitType.Em),
                        overflow = TextOverflow.Clip,
                        fontFamily = FontFamily.SansSerif
                    )

                    Text(text = "${topic.summary}",
                        modifier = Modifier
                            .width(textWidth.dp)
                            .height(rowBottomCellHeight.dp),
                        color = Color.Gray,
                        fontSize = TextUnit(3f, TextUnitType.Em),
                        overflow = TextOverflow.Clip
                    )
                }

                Spacer(modifier = Modifier.width(spacerWidth.dp))

                Column{
                    Text(text = "${topic.timestampText}",
                        modifier = Modifier.width(tailingContentWidth.dp).height(rowTopCellHeight.dp),
                        color = Color.Gray,
                        fontSize = TextUnit(3f, TextUnitType.Em),textAlign = TextAlign.End)

                    Text(text = "",
                        modifier = Modifier.width(tailingContentWidth.dp).height(rowBottomCellHeight.dp),
                        color = Color.Gray,
                        fontSize = TextUnit(3f, TextUnitType.Em),textAlign = TextAlign.End)
                }
            }
            //bottom line
            Text(text="", modifier = Modifier.height(1.dp).width((textWidth + spacerWidth + tailingContentWidth).dp)
                .border(Dp.Hairline, Color.LightGray))
        }

        Spacer(modifier = Modifier.width(horizontalPadding.dp))
    }
}